<template>
  <view>
    <view class="myform">
      <uni-forms
        :value="formData"
        :rules="rules"
        ref="form"
        validate-trigger="bind"
        err-show-type="undertext"
      >
        <!-- <view class="pageTitle">基本信息</view>
        <view class="info">
          <view class="info-item">
            <view>姓名</view>
            <view>{{ personInfo.name || "" }}</view>
          </view>
          <view class="info-item">
            <view>性别</view>
            <view>{{ personInfo.genderName || "" }}</view>
          </view>
          <view class="info-item">
            <view>身份证/ 其他证件</view>
            <view>{{ personInfo.cardId || "" }}</view>
          </view>
          <view class="info-item">
            <view>年龄</view>
            <view>{{ personInfo.age || "" }}</view>
          </view>
          <view class="info-item">
            <view>隔离类型</view>
            <view>{{ movePersonType || "" }}</view>
          </view>
        </view> -->

        <view class="form-wrapper">
          <view class="title pageTitle">隔离延期信息</view>
          <view class="form-content">

            <!-- <view class="form-item">
              <view class="label">延期时间</view>
              <picker
                mode="multiSelector"
                :value="dateTime"
                @change="turnOutDateChange"
                class="picker-control-con-picker-date"
                @columnchange="turnOutColumn"
                :range="dateTimeArray"
              >
                <view class="lableBox" style="display: inline-block">
                  <view class="uni-input">{{
                    formData.seeDoctorTime || "请选择延期时间"
                  }}</view>
                </view>
              </picker>
            </view> -->
          
            <view class="form-item">
              <view class="label"><text style="color:red;padding-right:10rpx;">*</text>延期天数</view>
              <uni-easyinput
                type="number"
                v-model="formData.addGlDay"
                placeholder="请输入"
                @input="changeDelayDays(formData.addGlDay)"
              ></uni-easyinput>
            </view>
            <view class="form-item">
              <view class="label">登记时间：</view>
              <view class="item-detail">{{formData.rigiTime}}</view>
            </view>

            <view class="form-item">
              <view class="label">原计划解除隔离时间：</view>
              <view class="item-detail item-detail-grey">{{formData.moveEndTime}}</view>
            </view>

            <view class="form-item">
              <view class="label">延期后隔离截止时间：</view>
              <view class="item-detail item-detail-grey">{{formData.glEndTime}}</view>
            </view>

            <view class="form-item form-item-textarea">
              <view class="label"><text style="color:red;padding-right:10rpx;">*</text>逾期原因：</view>
              <view class="item-detail-textarea">
                <textarea
                  type="text"
                  v-model="formData.cause"
                  placeholder="请输入"
                ></textarea>
              </view>
            </view>

            <view class="form-item form-item-textarea">
              <view class="label">备注：</view>
              <view class="item-detail-textarea">
                <textarea
                  type="text"
                  v-model="formData.seeDoctorAddress"
                  placeholder="请输入"
                ></textarea>
              </view>
            </view>
          </view>
 
        </view>

        <view class="example">
          <button class="submit" @click="submitForm">提 交</button>
        </view>
      </uni-forms>

    </view>
  </view>
</template>

<script>
import { cardTypes, } from "@/data";
import { getData,} from "@/api/index";
const {
  dateTimePicker,
  getMonthDay,
  generateTimeStr,
} = require("@/utils/dateTimePicker.js");
import dayjs from "dayjs";
import { throttle } from "@/utils";

export default {
  data() {
    return {
      dateTimeArray:null,   // （转出）时间日期插件数据
      dateTime: [],         // （转出）时间
      entryTimeArray:null,  // 转入时间日期插件数据
      entryTime: [],        // 转入时间

      personInfo: {},       // 隔离延期人员数据
      formData: {
        addGlDay: 7,        // 延期天数
        rigiTime: "2021-08-10  18:21:43", // 登记时间
        moveEndTime: "2021-08-24  18:21:43", // 计划解除隔离时间
        glEndTime:"2021-08-24  18:21:43",  // 延期后隔离解除时间
        cause: "",  // 延期原因
        remarks:"", // 延期备注
        seeDoctorTime:"",
      },
      rules: {
        time: {
          rules: [
            {
              required: true,
              errorMessage: "请录入延期时间"
            }
          ]
        },
        cause: {
          rules: [
            {
              required: true,
              errorMessage: "请录入延期原因"
            }
          ]
        },
      },
      hotelId:'',
      personInfo:'',
    };
  },
   async onLoad(ev) {
    this.hotelId = uni.getStorageSync("hotelId");
    this.personInfo = uni.getStorageSync("personInfo");
   
    // this.formData.moveStartTime = this.personInfo.moveStartTime;
    this.formData.moveEndTime = this.personInfo.moveEndTime;
    this.formData.glEndTime = this.personInfo.moveEndTime;
    this.formData.rigiTime = this.format(new Date().getTime());
  },
  onReady() {
    this.addDate();
  },
  methods: {
    changeDelayDays: throttle( function(ev){
      this.addDate();
    }, 500) ,

    addDate(){
      let seconds = this.formData.addGlDay * 86400000;   // 毫秒级
      let registerDate = new Date(this.formData.moveEndTime.replace(/-/g,'/')).getTime() + seconds;
      this.formData.glEndTime = this.format(registerDate);
    },

    format(timeNum){
      function add0(m){return m<10?'0'+m:m };
      //timeNum是整数，否则要parseInt转换
      var time = new Date(timeNum);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    },

    // 提交隔离延期记录
    async submitForm() {
      let tips ="";
      if (this.formData.cause == '') {
        tips ="请填写逾期原因"
      }
      if (this.formData.addGlDay =='' || this.formData.addGlDay < 0 || this.formData.addGlDay > 365) {
        tips ="请填写正确的延期天数"
      }
      if (tips) {
        uni.showToast({
          title: tips,
          icon:'none',
          duration: 3000
        });
        return
      }
      let params = {
        // personId: this.personInfo.personId,             // 隔离人员id
        moveInfoId: this.personInfo.moveInfoId,         // 入住信息表id
        
        addGlDay: this.formData.addGlDay,               // 延期隔离天数
        rigiTime: this.formData.rigiTime,               // 登记时间

        moveEndTime: this.personInfo.moveEndTime,       // 原计划解除隔离时间
        glEndTime: this.formData.glEndTime,             // 延期后隔离截止时间

        overdueReason: this.formData.cause,             // 逾期原因
        remarks: this.formData.remarks,                 // 逾期备注
      }

      await getData('isolationDelay','post', params).then(async res=>{

        // uni.setStorage({ key: 'personInfo', data: this.formData });
        uni.navigateTo({
          url: `../IsolationDelay/success?type=IsolationDelay`,
        });
        return;
        
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" rel="stylesheet/scss">
.picker-control {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  align-items: center;
  color: #333333;

  &-title {
    font-weight: 500;
    font-size: 26rpx;
  }

  &-con {
    &-picker {
      margin-top: 20rpx;
      padding: 10rpx 20rpx;
      text-align: left;
      border: 1px solid #f2f2f2;
      border-radius: 8rpx;

      &-date {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid #f2f2f2;

        .uni-input {
          line-height: 80rpx;
        }
      }

      .uni-input {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 26rpx;
      }
    }
  }
}

.picker-text-x {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 48px;
  color: #666666;
  opacity: 1;
}
.pageTitle {
  height: 98rpx;
  line-height: 98rpx;
  font-size: 40rpx;
  border-bottom: 1rpx solid rgba(229, 229, 229, 1);
  padding: 0 32rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #000000;
  opacity: 1;
  background-color: #fff;
}
.form-title {
  position: absolute;
  left: 0;

  font-size: 30rpx;
  color: #999999;
}

.info {
  font-size: 30rpx;
  margin-bottom: 30rpx;
  padding: 0 32rpx;
  background: #fff;
  &-item {
    display: flex;
    justify-content: space-between;
    // padding-top: 40rpx;
    // padding-bottom: 40rpx;
    padding-top: 18rpx;
    padding-bottom: 18rpx;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    font-weight: 500;
    &:last-child {
      border-bottom: 0;
    }
  }
}
.info view view:first-child {
  color: #999999;
  border-bottom: 0;
}
.info view view:last-child {
  color: #666666;
  font-size: 34rpx;
  border-bottom: 0;
}


.item-padding{
  padding-left: 30rpx;
}
.info-item{
  box-sizing: border-box;
  padding: 0;
  height: 140rpx;
  line-height: 140rpx;
}

// 表单
.form-wrapper {
  margin-bottom: 50rpx;
  text {
    color: red;
  }
  .form-content {
    padding: 0 32rpx 32rpx 32rpx;
    background-color: #fff;
    margin-bottom: 30rpx;

  }
  .form-item-border-none {
    border-bottom: none !important;
  }
  .inline-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .risk-value{
    input{
      color: red!important;
    }
  }
  .other-symptom-input {
    border-bottom: 1rpx solid #e4e4e4;
  }
  
  .submit {
    margin-top: 30rpx;
    height: 94rpx;
    line-height: 94rpx;
    background: #2c9af1;
    opacity: 1;
    border-radius: 16rpx;
  }
  .form-item {
    padding-top: 40rpx;
    padding-bottom: 14rpx;
    height: 196rpx;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 1);
    font-size: 34rpx;
    font-family: PingFang SC;
    border-bottom: 1rpx solid #e4e4e4;
    .label {
      color: #999999;
      font-size: 30rpx;
      padding-bottom: 26rpx;
    }
    .item-detail-grey{
      color: #666666;
    }
  }
  .form-item-textarea{
    height: 288rpx;
    .item-detail-textarea{
      height: 180rpx;
      overflow: auto;
      textarea {
        max-height: 180rpx;
      }
    }
  }
  // .form-item-textarea {
  //   .label {
  //     padding-bottom: 20rpx !important;
  //   }
  //   textarea {
  //     max-height: 200rpx;
  //   }
  // }

  .form-item-select-picker {
    border-bottom: none;
    .picker {
      position: relative;
      display: flex;
      align-items: center;
      height: 77rpx;
      padding: 0 40rpx;
      background: #ffffff;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
      border-radius: 6rpx;
      picker {
        width: 100%;
      }
    }
    .right-arrow-icon {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 50rpx;
      transform: rotate(90deg);
      image {
        width: 20rpx;
      }
    }
  }
  .form-item-date-picker,
  .form-item-textarea,
  .form-item-select-picker {
    padding-bottom: 36rpx;
    .label {
      padding-bottom: 10rpx;
    }
  }

  .inline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .picker-control-con-picker-date{
    border: none;
  }
}

.myform .uni-easyinput__content-input{
  font-size: 30rpx !important;
}

</style>
